<template>
  <view class="student-form" id="student-form">
    <view class="invite-id boxShadow">
      <view class="shop-info">
        <u-section
          title="店铺信息"
          :right="false"
          :bold="true"
          :font-size="28"
          color="#D65C45"
        >
        </u-section>
      </view>

      <!-- 学校 -->
      <view class="list-first">
        <view class="list-title"> 店铺位置</view>
        <view
          class="builder-kind"
          :style="{ color: schoolActive == true ? '#333333' : '' }"
          @click="researchSchool"
        >
          {{ schoolName }} >
        </view>
      </view>

      <!-- 店铺信息 -->
      <view
        class="list-first"
        v-for="(item, index) in student_list_shop"
        :key="index"
      >
        <view class="list-title"> {{ item.title }}</view>
        <view class="list-input">
          <u-input
            v-model="item.value"
            type="text"
            :clearable="false"
            input-align="right"
            :border="false"
            :placeholder="item.placeholder"
            :placeholder-style="'text-align:end;color:#999999;font-size:28rpx;'"
            :height="80"
          />
        </view>
      </view>
    </view>

    <!-- 楼长信息 -->
    <view class="invite-id boxShadow">
      <view class="shop-info">
        <u-section
          title="楼长信息"
          :right="false"
          :bold="true"
          :font-size="28"
          color="#D65C45"
        >
        </u-section>
      </view>
      <view
        class="list-first"
        v-for="(item, index) in student_list_builder"
        :key="index"
      >
        <view class="list-title"> {{ item.title }}</view>
        <view class="list-input">
          <u-input
            v-model="item.value"
            type="text"
            :clearable="false"
            input-align="right"
            :border="false"
            :placeholder="item.placeholder"
            :placeholder-style="'text-align:end;color:#999999;font-size:28rpx;'"
            :height="80"
          />
        </view>
      </view>

      <view class="idcard">
        <view class="idcard-title"> 身份证正反面</view>
        <view class="idcard-upload">
          <u-upload
            :custom-btn="true"
            :max-count="1"
            :height="181.5"
            :width="290"
            name="image"
            :show-progress="false"
            :header="{ AUTHORIZATION: vuex_user.token }"
            @on-success="IdcardOn"
            :action="`${image_upload_url}`"
          >
            <view slot="addBtn" class="slot-btn" hover-stay-time="150">
              <image src="@/static/student/identifiy_on.png" class="image" />
              <view class="upload-dis"> 上传身份证正面</view>
            </view>
          </u-upload>

          <u-upload
            :custom-btn="true"
            :max-count="1"
            :height="181.5"
            :width="290"
            name="image"
            :show-progress="false"
            :header="{ AUTHORIZATION: vuex_user.token }"
            @on-success="IdcardOff"
            :action="`${image_upload_url}`"
          >
            <view slot="addBtn" class="slot-btn" hover-stay-time="150">
              <image src="@/static/student/identifiy_off.png" class="image" />
              <view class="upload-dis"> 上传身份证反面</view>
            </view>
          </u-upload>
        </view>
      </view>

      <view class="idcard">
        <view class="idcard-title"> 学生证正反面</view>
        <view class="idcard-upload">
          <u-upload
            :custom-btn="true"
            :max-count="1"
            :height="181.5"
            :width="290"
            name="image"
            :show-progress="false"
            :header="{ AUTHORIZATION: vuex_user.token }"
            @on-success="studentCardOn"
            :action="`${image_upload_url}`"
          >
            <view slot="addBtn" class="slot-btn" hover-stay-time="150">
              <image src="@/static/student/studentcard_on.png" class="image" />
              <view class="upload-dis"> 上传学生证正面</view>
            </view>
          </u-upload>
          <u-upload
            :custom-btn="true"
            :max-count="1"
            :height="181.5"
            :width="290"
            name="image"
            :show-progress="false"
            :header="{ AUTHORIZATION: vuex_user.token }"
            @on-success="studentCardOff"
            :action="`${image_upload_url}`"
          >
            <view slot="addBtn" class="slot-btn" hover-stay-time="150">
              <image src="@/static/student/studentcard_off.png" class="image" />
              <view class="upload-dis"> 上传学生证反面</view>
            </view>
          </u-upload>
        </view>
      </view>
    </view>

    <!-- 选择学校 -->
    <u-select
      v-model="chooseSchoolShow"
      :list="schoolList"
      label-name="title"
      confirm-color="#D65C45"
      @confirm="changeSchool"
      @cancel="researchSchool"
      cancel-color="#ff9900"
      cancel-text="去搜索学校"
      value-name="id"
    ></u-select>
  </view>
</template>

<script>
import { IMAGE_UPLOAD_BASEURL } from "@/common/setting";
export default {
  data() {
    return {
      image_upload_url: IMAGE_UPLOAD_BASEURL,
      schoolName: "请选择学校",
      chooseSchoolShow: false, //选择学校 弹窗
      schoolActive: false,
      schoolList: [], //学校list
      student_list_shop: [
        {
          title: "楼栋",
          value: "",
          placeholder: "请填写楼栋（例：6栋）",
        },
        {
          title: "楼层",
          value: "",
          placeholder: "请填写楼层（例：10楼）",
        },
        {
          title: "宿舍号",
          value: "",
          placeholder: "请填写宿舍号（例：1005）",
        },
        {
          title: "店铺名称",
          value: "",
          placeholder: "请填写你的店铺名",
        },
      ],
      student_list_builder: [
        {
          title: "姓名",
          value: "",
          placeholder: "请填写你的姓名",
        },
        {
          title: "身份证号",
          value: "",
          placeholder: "请填写你的身份证号",
        },
        {
          title: "学生证号",
          value: "",
          placeholder: "请填写你的学生证号",
        },
      ],
    };
  },
  watch: {
    student_list_shop: {
      handler(newV, oldV) {
        this.$parent.apiForm.build = newV[0].value;
        this.$parent.apiForm.floor = newV[1].value;
        this.$parent.apiForm.number = newV[2].value;
        this.$parent.apiForm.shop_name = newV[3].value;
      },
      deep: true,
    },
    student_list_builder: {
      handler(newV, oldV) {
        this.$parent.apiForm.true_name = newV[0].value;
        this.$parent.apiForm.certification_number = newV[2].value;
        this.$parent.apiForm.idcard = newV[1].value;
      },
      deep: true,
    },
  },
  methods: {
    /**
     * 选择学校
     */
    // chooseSchool() {
    //   this.$u.api.schoolsListUApi().then((res) => {
    //     this.schoolList = res;
    //     this.chooseSchoolShow = true;
    //   });
    // },
    /**
     * 更改学校
     */
    changeSchool(e) {
      this.schoolName = e[0].label;
      this.$parent.apiForm.school_id = e[0].value;
      this.schoolActive = true;
    },
    /**
     *上传成功 身份证正面
     */
    IdcardOn(e) {
      console.log(e);
      
      this.$parent.apiForm.card_pic_front = e.data.url;
    },
    /**
     * 上传成功 身份证背面
     */
    IdcardOff(e) {
      this.$parent.apiForm.card_pic_end = e.data.url;
    },
    /**
     * 学生证 正面
     */
    studentCardOn(e){
      this.$parent.apiForm.certification_pic_front = e.data.url;
    },
    /**
     * 学生证 反面
     */
    studentCardOff(e){
      this.$parent.apiForm.certification_pic_end = e.data.url;
    },
    /**
     * 去搜索学校
     */
    researchSchool(){
      uni.navigateTo({
        url:'/pages/center/components/search-school'
      })
    }
  },
};
</script>

<style scoped lang ='scss' >
@mixin flex-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.list-title {
  width: 150rpx;
}
.list-input {
  flex: 1;
}
.builder-kind {
  flex: 1;
  color: #999999;
  font-size: 28rpx;
  text-align: end;
  height: 80rpx;
  line-height: 80rpx;
}
.image {
  width: 130rpx;
  height: 94rpx;
}

.upload-dis {
  color: #333333;
  font-size: 24rpx;
  margin-top: 10rpx;
}
.student-form {
  background-color: #f7f7f7;
  .invite-id {
    /* height: 110rpx; */
    background-color: #ffffff;
    border-radius: 20rpx;
    margin-top: 20rpx;
    padding: 10rpx 30rpx;
    .shop-info {
      padding: 10rpx 0;
    }
    .list-first {
      border-bottom: 0.1rpx solid #e6e6e6;
      @include flex-row;
      padding: 10rpx 0;
    }
    .list-first:last-child {
      border-bottom: none;
    }
    .idcard {
      padding: 0rpx 0 40rpx 0;
      border-bottom: 0.1rpx solid #e6e6e6;
      .idcard-title {
        margin: 20rpx 0;
        font-size: 28rpx;
        color: #333333;
      }
      .idcard-upload {
        @include flex-row;
        .slot-btn {
          width: 290rpx;
          height: 181.5rpx;
          background-color: #f3f3f3;
          border-radius: 10rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
      }
    }
    .idcard:last-child {
      border-bottom: none;
    }
  }
}
</style>
